<template>
  <div>
    <el-input
        :value="formattedValue"
        @input="handleInput"
        @blur="formatValue"
        :placeholder="placeholder"
        clearable
        maxlength="15"
    >
<!--      <template #append>元</template>-->
    </el-input>
  </div>
</template>

<script>
export default {
  name: 'MoneyInput',
  props: {
    value: {
      type: String,
      default: '0',
    },
    placeholder: {
      type: String,
      default: '请输入金额',
    },
  },
  data() {
    return {
      unformattedValue: this.value, // 用于在内部维护未格式化的值
    };
  },
  computed: {
    formattedValue() {
      // 对输入的值进行非空检查，并尝试格式化
      return this.unformattedValue ? this.formatWithComma(this.unformattedValue) : '';
    },
  },
  methods: {
    handleInput(value) {
      // 允许用户输入负数、小数，限制小数位数最多为两位，并确保去除了前导零，
      // 除非是小数点开始的部分。
      let validValue = value.replace(/[^0-9.]/g, '')
          .replace(/(\..*)\./g, '$1')
          .replace(/^0+(?!\.|$)/, '')
          .replace(/^(\d+\.\d{2}).*/, '$1');

      // 直接更新未格式化的值
      this.unformattedValue = validValue;
    },
    formatValue() {
      // 移除所有的千位分隔符然后发出值的变更事件
      let valueToSendBack = this.unformattedValue.replace(/,/g, '');
      this.$emit('input', valueToSendBack);
    },
    formatWithComma(value) {
      // 若值是合法数值，则返回带千位分隔符的字符串，否则返回原字符串
      if (!isNaN(parseFloat(value)) && isFinite(value)) {
        let parts = value.split('.');
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        return parts.join('.');
      }
      return value;
    },
  },
  watch: {
    value(val) {
      this.unformattedValue = val;
    },
  },
};
</script>